<template>
	<gui-page
		:customHeader="true"
		:headerStyle="headerStyle"
		:customFooter="true"
		:statusBarStyle="statusBarStyle"
		:isHeaderSized="false"
		:footerSets="{ height: 100, zIndex: 100 }"
	>
		<!-- 自定义头部导航 -->
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<!-- 返回按钮 -->
				<gui-header-leading :onlyBack="true" :buttonStyle="backButtonStyle"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color" :style="titleStyle">商品详情</text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<gui-swiper
				:swiperItems="swiperItems"
				indicatorColor="#999999"
				:width="750"
				:indicatorWidth="20"
				:indicatorHeight="10"
				:indicatorActiveWidth="38"
				:indicatorRadius="10"
				:height="1000"
				:padding="0"
				:spacing="0"
			></gui-swiper>
			<!--商品标题-->
			<view class="fx-f fx-f-jsb py-4 my-3 title-box gui-bg-white">
				<view class="font-size-38 gui-bold pl-2">{{ dataInfo.name }}</view>
				<view class="pr-2">
					<GuiNumberBox
						:value="1"
						:maxNum="99"
						width="150rpx"
						height="100rpx"
						btnColr="#FB7E22"
						btnSize="40rpx"
						btnFontBG1="#FB7E22"
						btnFontBG2="#FB7E22"
						btnFontSize="16rpx"
						inputBG="#FFFFFF"
					></GuiNumberBox>
				</view>
			</view>
			<!--商品详情-->
			<view class="height-100"></view>
			<view class="gui-margin"><rich-text :nodes="nodes"></rich-text></view>
		</view>
		<view class="mx-5 my-footer gui-nowrap gui-bg-white" slot="gFooter">
			<view class="mx-3 fx-f width-full fx-f-jsb">
				<view class="">
					<view class="height-40">抢购价</view>
					<view class="main-color-red">
						<text class="font-size-20">￥</text>
						<text>47</text>
					</view>
				</view>
				<view>
					<view class="main-bg-color p-2 my-border-radius fx-f fx-f-ajc">
						<view class="my-border-text"><text class="gui-list-arrow-right ali-icon gui-white animate1 gui-color-white">&#xe637;</text></view>
					</view>
				</view>
			</view>
		</view>
	</gui-page>
</template>
<script>
import GuiNumberBox from '@/components/guiCom/gui-number-box.vue';
var parserHtml = require('@/GraceUI5/js/parserHTML.js');
export default {
	data() {
		return {
			backButtonStyle: 'color:#FFFFFF;', // 返回按钮样式
			headerStyle: 'background-color:rgba(255,255,255,0)', // 头部导航样式
			statusBarStyle: 'background-color:rgba(255,255,255,0)', // 状态栏样式
			titleStyle: 'opacity:0', // 导航标题样式
			swiperItems: [
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/1.png',
					url: '',
					title: '测试标题 001',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
					url: '',
					title: '测试标题 02',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/3.png',
					url: '',
					title: '测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/4.png',
					url: '',
					title: '测试标题04',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/5.png',
					url: '',
					title: '测试标题05',
					opentype: 'navigate'
				}
			],
			id: '',
			nodes: '',
			dataInfo: {}
		};
	},
	// 页面滚动调整导航的透明度
	onPageScroll: function(e) {
		if (e.scrollTop > 100) {
			this.backButtonStyle = 'color:#323232;';
			this.headerStyle = 'background-color:rgba(255,255,255,0.9)';
			this.titleStyle = 'opacity:1';
		} else {
			(this.backButtonStyle = 'color:#FFFFFF;'), (this.headerStyle = 'background-color:rgba(255,255,255,0)');
			this.titleStyle = 'opacity:0';
		}
	},
	onLoad(option) {
		this.id = option.id;
		// this.__init();
	},
	methods: {
		__init() {
			this.$HTTP
				.post('/app/products/getProductsInfo', {
					id: this.id
				})
				.then(res => {
					this.nodes = parserHtml.parserHTML(res.data.content);
					this.dataInfo = res.data;
					this.swiperItems = res.data.masterImages.split(',').map(img => {
						return { img };
					});

					console.log('this.swiperItems', this.swiperItems);
					console.log('this.nodes', this.nodes);
				});
		}
	},
	components: {
		GuiNumberBox
	}
};
</script>
<style lang="scss" scoped>
/* 引入动画库 */
@import '@/GraceUI5/css/animate.css';
/* 定义动画修饰样式 */
.animate1 {
	animation: rubberBand 3s infinite;
}
/* title 标题 */
.title-box {
	margin-top: -28px;
	position: absolute;
	width: 100%;
	border-top-right-radius: 30px;
	border-top-left-radius: 30px;
}
/*  底部自定义 */
.my-footer {
	border-radius: 20rpx;
	height: 90rpx;
	margin-bottom: 50rpx;
	.my-border-radius {
		margin-top: -6rpx;
		transform: rotate(60deg);
		border-radius: 30rpx;
	}
	.my-border-text {
		transform: rotate(-60deg);
	}
	.gui-list-arrow-right {
		font-size: 28px !important;
		height: 60rpx !important;
	}
}
</style>
